<template>
    <div v-show="overlayShow" class="product-list-select">
            <!--  -->
        <div class="window">
            <div v-show="isMulti" class="selected-pro-par">
                <div class="selected-pro-par-title">
                    已选产品<span class="color-999">(不超过3个)</span>
                </div>
                <div class="selected-pro-par-list">
                    <a 
                    class="selected-product-opt"
                    v-for="(item, index) in selectedList" 
                    :key="index"
                    >
                        <span class="selected-product-opt-text">{{item.name}}</span>
                        <van-icon @click="delProduct(item)" class="cross" name="cross" />
                    </a>
                </div>
            </div>
            <div class="opt-list">
                <div class="product-div product-div-one">
                    <a 
                    v-for="item in productListFirst" 
                    :key="item.code"
                    :class="productListActive.first.code == item.code ? 'product-div-one-a-active' : ''"
                    @click="setProductActive({name: item.name, code: item.code, series: 2, key: 'first'})"
                    class="product-div-a product-div-one-a">
                        {{item.name}}
                    </a>
                </div>
                <div v-show="productListActive.series >= 2" class="product-div product-div-second">
                    <a 
                    @click="finallyChoose({series: 1, code: productListActive.first.code, name: productListActive.first.name})" 
                    class="product-div-a product-div-second-a product-div-second-all">全部</a>
                    <a 
                    v-for="item in productListSencode" 
                    :key="item.code"
                    :class="productListActive.second.code == item.code ? 'product-div-second-a-active' : ''"
                    @click="setProductActive({name: item.name, code: item.code, series: 3, key: 'second'})"
                    v-show="item.code.includes(productListActive.first.code)"
                    class="product-div-a product-div-one-a">
                        {{item.name}}
                    </a>
                </div>
                <div v-show="productListActive.series >= 3" class="product-div product-div-thirdly">
                    <a 
                    @click="finallyChoose({series: 2, code: productListActive.second.code, name: productListActive.second.name})"
                    class="product-div-a product-div-thirdly-a product-div-thirdly-all">全部</a>
                    <a 
                    v-for="item in productListThirdly" 
                    :key="item.code"
                    :class="productListActive.thirdly.code == item.code ? 'product-div-thirdly-a-active' : ''"
                    @click="setProductActive({name: item.name, code: item.code, series: 4, key: 'thirdly'})"
                    v-show="item.code.includes(productListActive.second.code)"
                    class="product-div-a product-div-one-a">
                        {{item.name}}
                    </a>
                </div>
                <div v-show="productListActive.series >= 4" class="product-div product-div-fourthly">
                    <a 
                    @click="finallyChoose({series: 3, code: productListActive.thirdly.code, name: productListActive.thirdly.name})"
                    class="product-div-a product-div-fourthly-a product-div-fourthly-all">全部</a>
                    <a 
                    v-for="item in productListFourthly" 
                    :key="item.code"
                    :class="productListActive.fourthly.code == item.code ? 'product-div-fourthly-a-active' : ''"
                    @click="finallyChoose({name: item.name, code: item.code, series: 4, key: 'fourthly'})"
                    v-show="item.code.includes(productListActive.thirdly.code)"
                    class="product-div-a product-div-one-a">
                        {{item.name}}
                    </a>
                </div>
            </div>
            <div v-show="isMulti" class="select-product-memnu">
                <div @click="hideWindow" id="select-product-cancle" class="edit-btn">取消</div>
                <div @click="choseMultiSure" id="select-product-sure" class="edit-btn">确定</div>
            </div>
        </div>
        <van-overlay :show="overlayShow" @click="hideWindow" />
    </div>
</template>

<script>
// UI组件
import { Overlay, Icon, } from "vant"

// 自定义方法
import { failTextVantToa } from "_projectFn/prompt"

import Vue from "vue"

Vue.use(Overlay).use(Icon)

export default {
    name: 'ProductListSelect',
    props: {
        isMulti: { // 是否选择多个产品
            type: Boolean,
            default: false,
        },
        selectedListData: { // 已选择产品列表
            type: Array,
            // default: [],
        },
        maxSelectLength: {
            type: Number,
            default: 3,
        }
    },
    data() {
        return {
            overlayShow: false,
            selectedList: [], // 选择的产品列表
            // productList: [], // 全部产品列表
            productListActive: {
                first: {
                    code: null,
                    name: null,
                },
                second: {
                    code: null,
                    name: null,
                },
                thirdly: {
                    code: null,
                    name: null,
                },
                fourthly: {
                    code: null,
                    name: null,
                },
                series: 1,
            },
        }
    },
    methods: {
        hideWindow() {
            this.overlayShow = false
        },
        showWindow() {
            this.overlayShow = true
        },
        returnProductSeries(series) {
            const arr = []
            // console.log('this.productList', this.productList)
            this.productList.forEach(item => {
                if (item.series == series) {
                    arr.push({
                        code: item.code,
                        name: item.name,
                        series: item.series,
                    })
                }
            })
            return arr
        },
        // 保存已选择的产品
        setProductActive({code, name, series, key}) {
            // console.log('series', series)
            if (code && name && key && series) {
                this.productListActive[key].name = name
                this.productListActive[key].code = code
                this.productListActive.series = series
            }
        },
        // 最后选择的产品
        finallyChoose({code, name, series}) {
            if (code && name && series) {
                if (this.isMulti) { // 如果选择多个产品
                    this.finallyChooseMulti({code, name, series})
                } else {
                    this.finallyChooseSingle({code, name, series})
                }
            }
        },
        // 选择多个产品
        finallyChooseMulti({code, name, series}) {
            if (code && name && series) {
                if (this.checkMulti()) {
                    this.addChoseMulti({code, name, series})
                }
            }
        },
        // 选择单个产品
        finallyChooseSingle({code, name, series}) {
            if (code && name && series) {
                this.$emit('choseProduct', {code, name, series})
            }
        },
        // 选择多个产品，点击当前产品时，检测是否可以再选
        checkMulti() {
            if (this.selectedList.length >= this.maxSelectLength) {
                failTextVantToa(`最多选择${this.maxSelectLength}个`)
                return false
            }
            return true
        },
        // 增加选择的产品
        addChoseMulti({code, name, series}) {
            this.selectedList.push({code, name, series})
        },
        // 删除选择的产品
        delProduct(data) {
            const array = this.selectedList
            for (let index = 0; index < array.length; index++) {
                if (array[index].code == data.code) {
                    array.splice(index, 1)
                    break
                }
            }
        },
        // 选择多个产品，点击确定
        choseMultiSure() {
            if (this.isMulti) { // 选择多个
                this.$emit('multiProductChose', this.selectedList)
            } else {
                const key = this.productListActive.series == 2 ? 'second'
                : this.productListActive.series == 2 ? 'thirdly' 
                : 'fourthly'
                this.finallyChooseSingle({
                    code: this.productListActive[key].code,
                    name: this.productListActive[key].name,
                    series: this.productListActive.series,
                })
            }
            this.hideWindow()
        },
        // 恢复初始数据
        recoverData() {
            this.overlayShow = false
            this.productListActive = Object.assign({}, this.productListActive, {
                first: {
                    code: null,
                    name: null,
                },
                second: {
                    code: null,
                    name: null,
                },
                thirdly: {
                    code: null,
                    name: null,
                },
                fourthly: {
                    code: null,
                    name: null,
                },
                series: 1,
            })
        }
    },
    computed: {
        productList() {
            return this.$store.getters.productList
        },
        productListFirst() {
            return this.returnProductSeries(1)
        },
        productListSencode() {
            return this.returnProductSeries(2)
        },
        productListThirdly() {
            return this.returnProductSeries(3)
        },
        productListFourthly() {
            return this.returnProductSeries(4)
        },
    },
    watch: {
        selectedListData: {
            immediate: true,
            deep: true,
            handler(val) {
                this.selectedList = [...val]
            }
        }
    },
    // activated() {

    // },
    deactivated() {
        this.recoverData() // 恢复初始数据
    },
}
</script>

<style lang="scss" scoped>
.window {
    width: 100%;
    position: fixed;
    background: white;
    z-index: 102;
    font-size: 12px;
    bottom: 0;
    left: 0;

    .opt-list {
        display: -webkit-flex;
        display: flex;
        background: white;
        height: 320px;
        border-top: 1px solid #E5E5E5;
    }

    .selected-pro-par-title {
        line-height: 30px;
        padding: 0 15px;
        margin-top: 5px;
    }

    .selected-pro-par-list {
        display: -webkit-flex;
        display: flex;
        padding-right: 15px;
        flex-wrap: wrap;
    }

    .selected-product-opt {
        cursor: pointer;
        color: white !important;
        background: #0077bf;
        display: inline-block;
        padding: 0px 6px;
        text-align: center;
        font-size: 12px;
        height: 20px;
        line-height: 20px;
        margin-left: 15px;
        margin-top: 10px;
    }

    .selected-product-opt:last-child {
        margin-bottom: 17px;
    }

    .selected-product-opt-text-del {
        display: inline-block;
        width: 20px;
        height: 20px;
        line-height: 16px;
        top: 2px;
    }

    .cross {
        cursor: pointer;
    }

    .product-div-show{bottom: 0!important;}

    .product-div {
        width: 25%;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .product-div-a {
        display: -webkit-flex;
        display: flex;
        min-height: 40px;
        flex-wrap: nowrap;
        align-items: center;
        width: 100%;
        padding: 0 10px;
        color: #333333;
        border-bottom: 1px solid #E5E5E5;
    }

    .product-div-a:hover, .product-div-a:focus {
        color: #333333;
        text-decoration: underline;
    }

    .product-div-one {
        background: white;
        border-right: 1px solid #eeeeee;
    }

    .product-div-one-a {
        border-bottom: 1px solid #E5E5E5;
    }

    .product-div-one-a-active {
        background: #eeeeee;
    }

    .product-div-second {
        background: #eeeeee;
    }

    .product-div-second-a {
        background: #eeeeee;
    }

    .product-div-second-a-active {
        background: #cdcdcd;
    }

    .product-div-thirdly {
        background: #cdcdcd;
    }

    .product-div-thirdly-a {
        background: #cdcdcd;
    }

    .product-div-thirdly-a-active {
        background: #b9b9b9;
    }

    .product-div-fourthly {
        background: #b9b9b9;
    }

    .select-product-memnu {
        background: white;
        height: 55px;
        width: 100%;
        padding: 3px;
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 1px 1px 2px 1px rgba(187, 187, 187, 0.4);
        border-top: 1px solid #f5f5f5;
    }

    #select-product-cancle {
        flex-shrink: 0;
        display: -webkit-flex;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 80px;
    }

    #select-product-sure {
        width: 100%;
        height: 100%;
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #0077bf;
        color: white;
        font-size: 20px;
        cursor: pointer;
    }
}
</style>